<template>
  <div class="home">
    <div class="home-head">
      <div class="logo-section">
        <img src="@/assets/logo-topbar.gif" alt="JPetStore" class="logo" />
      </div>
      <div class="nav-section">
        <div class="search-box">
          <input type="text" placeholder="Search..." />
          <button class="search-btn">Search</button>
        </div>
        <div class="nav-links">
          <button @click="toCart" class="nav-link"><img src="@/assets/cart.gif" alt="Cart" class="cart-icon" /></button>
          <span class="separator">|</span>
          <div v-if="!store.getters.getLoginStatus">
            <button @click="signIn" class="nav-link">Sign In</button>
            <span class="separator">|</span>
            <button @click="register" class="nav-link">Register</button>
          </div>
          <div v-else>

            <el-icon class="nav-link" @click="toUserInfo">
              <User />
            </el-icon>
          </div>
          <span class="separator">|</span>
          <RouterLink to="/help" class="nav-link">?</RouterLink>
        </div>
      </div>
    </div>
    <div class="home-middle">
      <div class="home-middle-select">
        <button @click="navigateToCategory('FISH')"><img src="@/assets/sm_fish.gif" /></button>
        <span class="separator">|</span>
        <button @click="navigateToCategory('DOGS')"><img src="@/assets/sm_dogs.gif" /></button>
        <span class="separator">|</span>
        <button @click="navigateToCategory('REPTILES')"><img src="@/assets/sm_reptiles.gif" /></button>
        <span class="separator">|</span>
        <button @click="navigateToCategory('CATS')"><img src="@/assets/sm_cats.gif" /></button>
        <span class="separator">|</span>
        <button @click="navigateToCategory('BIRDS')"><img src="@/assets/sm_birds.gif" /></button>
      </div>
      <RouterView v-slot="{ Component }">
        <component :is="Component" />
      </RouterView>
    </div>
    <div class="home-bottom">
      <a href="https://www.csu.edu.cn/">www.csu.edu.cn</a>
    </div>
  </div>
  <div class="return-menu">
    <button @click="goToMainMenu">Return to Main Menu</button>
  </div>
</template>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.home-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: black;
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 15%;
}

.logo-section {
  display: flex;
  align-items: center;
}

.logo {
  height: auto;
}

.nav-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.search-box {
  display: flex;
  gap: 5px;
  align-items: right;
}

.search-box input {
  padding: 5px;
  border: 1px solid #ccc;
}

.search-btn {
  background-color: #666;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.nav-links {
  display: flex;
  gap: 10px;

}

.cart-icon {
  height: 20px;
}

.nav-link {
  color: #ffa500;
  text-decoration: none;
  border: none;
  background-color: transparent;
  font-size: 16px;
  cursor: pointer;
}

.separator {
  color: #0095fff3;
}

.home-middle {
  margin-top: 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.home-middle-select {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.home-middle-select button {
  border: none;
  background-color: transparent;
  padding: 0;
  cursor: pointer;
}

.home-middle-select img {
  cursor: pointer;
}

.home-bottom {
  background-color: black;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10%;
}

.home-bottom a {
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: flex-start;
  padding-right: 20px;
  color: #1e3c81;
  text-decoration: none;
  width: 10%;
}

.home-bottom a:hover {
  color: #0062ff;
}

.return-menu {
  position: fixed;
  /* 使用固定定位 */
  right: 20px;
  /* 距离右侧 20px */
  bottom: 20px;
  /* 距离底部 20px */
}

.return-menu button {
  font-family: "黑体", sans-serif;
  /* 设置字体为黑体 */
  color: white;
  /* 设置文字颜色为白色 */
  font-size: 18px;
  /* 设置字体大小适中 */
  background-color: #666;
  /* 设置背景颜色 */
  border: none;
  /* 移除边框 */
  padding: 10px 20px;
  /* 设置内边距 */
  border-radius: 5px;
  /* 设置圆角 */
  cursor: pointer;
  /* 设置鼠标指针样式 */
}

.return-menu button:hover {
  background-color: #555;
  /* 鼠标悬停时的背景颜色 */
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import store from '@/store'
import { ElMessage } from 'element-plus'
import { User } from '@element-plus/icons-vue'


const router = useRouter()
const componentName = ref('HomeComponent')
// 获取用户是否登录
// const isLoggedIn = ref(store.getters.getLoginStatus)
// 跳转到登录页面
const signIn = () => {
  //componentName.value = 'LoginComponent'
  router.push('/login')
}
// 跳转到注册页面
const register = () => {
  //componentName.value = 'RegisterComponent'
  router.push('/register')
}
// 路由守卫
router.beforeEach((to, from, next) => {
  /*if (to.path === '/home') {
    componentName.value = 'HomeComponent'
  }else if (to.path === '/login') {
    componentName.value = 'LoginComponent'
  } else if (to.path === '/register') {
    componentName.value = 'RegisterComponent'
  }*/
  next()
})
// 处理按钮点击事件
const navigateToCategory = (categoryId: string) => {
  router.push(`/category/${categoryId}`)
}
/*********************************************************/
// 跳转到购物车页面   非本页，不需要路由
/*
const toCart = () => {
   if (isLoggedIn.value) {
     router.push('/cart')
   } else {
     ElMessage.warning('请先登录')
   }
}
   */
const toCart = () => {
  if (store.getters.getLoginStatus) {


    window.location.href = "/page2.html"  // 直接跳转到购物车页面
  } else {
    ElMessage.warning('请先登录');
  }
};

/************************************************************/
// 跳转到用户信息页面
const toUserInfo = () => {
  router.push('/userInfo')
}
// 点击返回主菜单
const goToMainMenu = () => {
  router.push('/home')
}
</script>
